<template>
	<view>
		<view >
			<!-- #ifndef MP -->
			<!-- 空出的距离 -->
			<view class="status-bar"></view>
			<!-- #endif -->
			<!-- 用户状态信息 -->
			<view class="my-header">
				<view @click="hasLogin ? navTo('/pages/my/user') :  navTo('/pages/auth/login')"
				class="header-content space-between center">
					<view class="left center">
						<image class="header-image" :src="userInfo.imageUrl || '/static/logo.png'" mode=""></image>
						<view v-if="hasLogin" class="header-info column">
							<text class="nickName">{{userInfo.nickName}}</text>
							<text class="username" v-if="userInfo.username !=null">用户名：{{userInfo.username}}</text>
						</view>
						<view v-else class="header-info">
							<text class="nickName">请登录</text>
						</view>
					</view>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>
		
		<!-- 功能列表 -->
		<my-list :list="list"></my-list>
	</view>
</template>

<script>
	import list from '@/config/my-list-bar.js'
	
	import {mapState,mapGetters} from 'vuex'
	
	export default {
		data() {
			return {
				list:list()//简写
			}
		},
		computed:{
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
			// userInfo(){
			// 	return this.$store.state.userInfo
			// }
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	
.status-bar{
	height: calc(var(--status-bar-height) + 48px) ;
	width: 100%;
	background-color: $mxg-color-primary;
}

.my-header{
	background-color:$mxg-color-primary;
	.header-content{
		padding: 50rpx 39rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}
	
	.left{
		.header-image{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
		.header-info{
			margin-left: 30rpx;
			.nickName{
				font-size: 39rpx;
				font-weight: bold;
			}
			.username{
				font-size: 33rpx;
				color: $mxg-text-color-grey;
			}
		}
		
	}
	
	.icon-right{
		font-size: 35rpx;
		color: $mxg-text-color-grey;
	}
}
</style>
